<template>
  <el-dialog
    title="抢购商品"
    :visible.sync="dialogVisible"
    width="98%">
    <div>
      <el-form :model="shopProductStock" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
        <el-form-item
          label="商品:">
          <span class="b red" v-text="shopProductStock.shopProductName"></span>
        </el-form-item>
        <el-form-item
          label="型号:">
          <span class="b red" v-text="shopProductStock.model"></span>
        </el-form-item>
        <el-form-item
          label="剩余库存:">
          <span class="b red" v-text="shopProductStock.shopSkillNums-shopProductStock.shopSkillSaleNums"></span>
        </el-form-item>
        <el-form-item
          label="限购数量:">
          <span class="b red" v-text="shopProductStock.shopSkillLimitNums"></span>
        </el-form-item>
        <el-form-item
          label="您的已购数量:">
          <span class="b red" v-text="myBuyNums?myBuyNums:0"></span>
        </el-form-item>
        <el-form-item
          label="购买数量:">
          <el-input-number v-model.number="nums" :min="1" :max="shopProductStock.shopSkillLimitNums-myBuyNums"/>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <div style="background: #eedede; color: #c44646; line-height: 25px; text-align: center" v-if="nums+myBuyNums>shopProductStock.shopSkillLimitNums">您的购买数量已经达到上限，您可以选择常规购买</div>
      <el-button type="primary" v-if="myBuyNums<shopProductStock.shopSkillLimitNums" :disabled="nums+myBuyNums>shopProductStock.shopSkillLimitNums || nums<=0" @click="goToBuy">前往下单</el-button>
    </div>
  </el-dialog>

</template>

<script>
export default {
  name: 'ShopSkillProductDialog',
  data:function () {
    return {
      myBuyNums:0,
      nums:0,
      shopProductStock:{
        commission: 0,
        groupNums: 0,
        groupPrice: 0,
        id: 0,
        image: "https://yangfan-shop.oss-cn-hangzhou.aliyuncs.com/upload-file/2023-01-03/20230103210632750.jpg",
        isDefault: {name: "否", id: 0},
        isShopSkill: 1,
        model: "33333",
        nums: 100,
        price: 35,
        saleNums: 0,
        shopId: null,
        shopLogo: null,
        shopName: null,
        shopProductClassifyName: null,
        shopProductId: 100,
        shopProductImage: "https://yangfan-shop.oss-cn-hangzhou.aliyuncs.com/upload-file/2023-01-03/20230103152956866.jpg",
        shopProductName: "测试商品3",
        shopSkillEndTime: "2023-01-06 00:00:00",
        shopSkillId: 2,
        shopSkillLimitNums: 3,
        shopSkillNums: 50,
        shopSkillPrice: 30,
        shopSkillSaleNums: 0,
        shopSkillStartTime: "2023-01-05 23:00:00",
        shopSkillStatus: {name: "进行中", id: 1},
        status: {name: "正常", id: 1},
        surplusSeconds: 757,
        updatedTime: "2023-01-03 21:09:02",
        volume: "",
        weight: ""
      },
      dialogVisible:false
    }
  },
  mounted () {
    let $this=this
    $this.bus.$on('BackKeyCallBus',function (){
      $this.dialogVisible=false
      $this.$forceUpdate()
    })
    $this.bus.$on('ShopSkillProductDialogCallBus',function (shopProductStock) {
      $this.shopProductStock=shopProductStock
      $this.dialogVisible=true
      $this.getBuyNums()
      $this.$forceUpdate()
    })
  },
  methods:{
    getBuyNums:function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameMember + 'Public/shopProductSeckillGetBuyNums', {shopSkillId: this.shopProductStock.shopSkillId, shopProductStockId: this.shopProductStock.id}, function (data) {
        $this.myBuyNums=data
        $this.$forceUpdate()
      })
    },
    // 单独购买
    goToBuy: function (item) {
      if (this.myBuyNums+this.nums>this.shopProductStock.shopSkillLimitNums){
        return this.$message.error('总购买数量不能超过限购数量')
      }
      if (this.nums<=0){
        return this.$message.error('抢购数量必须大于0')
      }
      this.dialogVisible=false
      var selectData = {
        shop: {
          id: this.shopProductStock.shopId,
          name: this.shopProductStock.shopName,
          logo: this.shopProductStock.shopLogo
        },
        productList: [
          {
            nums: this.nums,
            model: this.shopProductStock.model,
            price: this.shopProductStock.shopSkillPrice,
            shopProductId: this.shopProductStock.shopProductId,
            shopProductName: this.shopProductStock.shopProductName,
            image: this.shopProductStock.shopProductImage,
            id: this.shopProductStock.id,
            shopSkillId: this.shopProductStock.shopSkillId
          }
        ]
      }
      localStorage.setItem('selectProductData', JSON.stringify(selectData))
      this.$router.push({
        name: 'ConfirmOrder',
        query: {
          type: 'one',
          shopSkillId: this.shopProductStock.shopSkillId
        },
      })
    },
  }
}
</script>

<style scoped>

</style>
